<template>
  <a-list class="loadmore-list" itemLayout="horizontal" :dataSource="getData(length)">
    <div v-if="showLoadingMore && dataSource.length > expectedLength" slot="loadMore" :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
      <a-button @click="onLoadMore">{{ dataSource.length }} More...</a-button>
    </div>
    <div v-if="!showLoadingMore" slot="loadMore" :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
      <a-button @click="onShowLess"> Less...</a-button>
    </div>
    <a-list-item slot="renderItem" slot-scope="item, index" class="filter-list-item">
      <a-checkbox @change="onChange(item, index)">{{ item.name }}</a-checkbox>
      <a-tag>{{ item.nums }}</a-tag>
    </a-list-item>
  </a-list>
</template>

<script>
export default {
  name: 'FilterList',
  data () {
    return {
      showLoadingMore: true,
      length: 5
    }
  },
  props: {
    dataSource: {
      type: Array,
      default: () => []
    },
    expectedLength: {
      type: Number,
      default: 5
    }
  },
  methods: {
    onChange (item, index) {

    },
    getData (expectedLength) {
      if (this.dataSource.length >= expectedLength) {
        return this.dataSource.slice(0, expectedLength)
      } else {
        return this.dataSource
      }
    },
    onLoadMore () {
      this.length = this.dataSource.length
      this.showLoadingMore = false
    },
    onShowLess () {
      this.length = this.expectedLength
      this.showLoadingMore = true
    }
  },
  mounted () {
    this.length = this.expectedLength
  },
  components: {

  }
}
</script>

<style lang="less">
.filter-list-item {
  .ant-list-item-content {
    justify-content: space-between;
  }
}
</style>

<style lang="less" scoped>

</style>
